<!--
 * @Author: actor
 * @Date: 2023-11-13 15:42:06
 * @email: 395593455@qq.com
 * @LastEditors: actor
 * @LastEditTime: 2023-12-20 14:12:39
 * @FilePath: \i-hos-app\shared\emr\src\views\editer\Toolbar.vue
 * @Description: 电子病历头部编辑配置
-->
<template>
  <el-tabs v-model="setHeadTabActiveName" class="emr_tabs">
    <!-- 一级配置列表 -->
    <el-tab-pane v-for="item in computedEmrHeadSet" :key="item._tp" :label="item._n" :name="item._tp">
      <template #label>
        <span :class="['iconfont', 'icon-' + item._tp]"></span>
        <span class="text">{{ item._n }}</span>
      </template>
      <!-- 二级配置列表 -->
      <!-- 判断是否为富文本编辑 -->
      <!-- 头部配置使用富文本编辑组件  -->
      <!-- <EditSet v-if="item._tp == 'edit'" /> -->
      <!-- 头部配置渲染信息  -->
      <div class="emr_setList" v-for="obj in item._s_l" :key="obj._tp" @click="handHeadSet(item._tp as string, obj)">
        <div>
          <div class="emr_setList_item" v-if="!obj._dropDown">
            <svg class="emr-icon" aria-hidden>
              <use :xlink:href="'#icon-' + obj._tp"></use>
            </svg>
            <span>{{ obj._n }}</span>
            <UploadPic class="pic" v-if="obj._n == '图片'"></UploadPic>
          </div>
          <!-- 判断二级配置列表是否具有下拉展示的组件 -->
          <!-- 如果有二级列表的下拉组件,则使用下拉组件 -->
          <el-dropdown v-else trigger="click" placement="bottom-start">
            <span class="emr_setList_item">
              <svg class="emr-icon" aria-hidden>
                <use :xlink:href="'#icon-' + obj._tp"></use>
              </svg>
              <span>{{ obj._n }}</span>
            </span>
            <template #dropdown>
              <el-dropdown-item style="background-color: #fff; padding: 10px; color: #000">
                <component v-if="!!obj._dropDown" :is="dialogComponents.get(obj._dropDown)" :key="obj._dropDown" />
              </el-dropdown-item>
            </template>
          </el-dropdown>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
  <!-- 头部配置使用富文本编辑组件  -->
  <EditSet />
</template>

<script setup lang="ts">
  import { ref, Ref, toRefs, shallowRef, defineAsyncComponent, ComputedRef, computed } from 'vue'
  // 自定义Symbol图标
  import '../../assets/font/iconfont'
  // 富文本操作配置组件
  import EditSet from '../../components/file/EditSet.vue'
  // 图片上传组件
  import UploadPic from '../../components/common/UploadPic.vue'
  // 接口约束
  import { ISetType, ISetConfigType, ISetEmrState, ISetHead } from '../../interface/set'
  // 电子病历配置数据
  import { useHeadSetStore } from '../../store/emr'
  // 解构 store的配置数据
  const headSetStore: ISetEmrState = useHeadSetStore()
  const { _emr_head_set } = toRefs<ISetEmrState>(headSetStore)

  // 初始化数据
  let setHeadTabActiveName: Ref<string> = ref('file') // tabs选中的状态名字

  // 自定义渲染组件
  import componentList from '../../store/componentSet'
  const dialogComponents: Ref<Map<string, any>> = shallowRef(new Map<string, any>())
  // 异步加载组件
  for (let obj of componentList) {
    dialogComponents.value.set(obj._tp as string, defineAsyncComponent(obj._cw))
  }

  // 计算head的配置项
  const computedEmrHeadSet: ComputedRef<ISetHead> | any = computed((): ISetHead => {
    let arr: any = _emr_head_set.value.filter((item) => item._tp != 'edit')
    return arr
  })

  // 定义向父组件传值的事件
  const $emit = defineEmits<{
    (e: 'toFatherConfig', type: string, flag: ISetType | ISetConfigType): void
  }>()

  // 操作head向父组件传递操作head的配置类型
  const handHeadSet = (type: string, flag: ISetType): void => {
    if (!flag._dd_list) {
      $emit('toFatherConfig', type, flag)
    }
  } // 操作头部的配置选项
</script>

<style lang="scss" scoped>
  // 自定义Font class样式
  @import '../../assets/font/iconfont.css';
  :deep(.emr-icon) {
    width: 14px;
    height: auto;
    max-height: 20px;
    vertical-align: -0.6em;
    fill: currentColor;
    overflow: hidden;
    margin-right: 2px;
  }
  .emr_tabs {
    background-color: #efefef;
    .text {
      line-height: lem;
      padding-left: 2px;
    }
  }

  .emr_setList {
    float: left;
    font-size: var(--theme-font-size);
    cursor: pointer;
    white-space: nowrap;
    &:hover {
      background-color: #f5f7fa;
      svg {
        background-color: #f5f7fa;
      }
    }
    .emr_setList_item {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2px 6px;
      border-radius: 2px;
      position: relative;
      overflow: hidden;
      .pic {
        opacity: 0;
      }
    }
  }
  .edit_set {
    width: 100%;
    :deep(.emr_setList_item) {
      padding: 3px 5px;
    }
  }
</style>
